import { Navigate,useRoutes } from "react-router-dom"
import Login from "../components/Login"
import Main from "../components/Main"
import NotFound from "../components/404"
import About from "../components/Main/About"
import Home from "../components/Main/Home"
import Music from "../components/Main/Home/Music"
import News from "../components/Main/Home/News"
const routes = [
    {
        path: '/login',
        element: <Login />
    }, {
        path: '/main',
        element: <Main />,
        children: [
            {
                path: '/main/home',
                element: <Home />,
                children: [
                    {
                        path: '/main/home/music',
                        element: <Music />
                    }, {
                        path: '/main/home/news',
                        element: <News />
                    }
                ]      
            }, {
                path: '/main/about',
                element: <About />
            }
        ]
    }, {
        path: '/',
        element:<Navigate to="/login" />
    }, {
        path: '*',
        element: <NotFound />
    }
]
export default routes;
//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
export const GetRoutes=()=>{
     //在组件中在外层可以使用hook
    return useRoutes(routes)
}
//自定义hooks
export const useMyRoutes=()=>{
     //在自定义hooks中是可以使用hook
    return useRoutes(routes)
}
